<template>
<!-- 展品 -->
  <view class="exhibits">
    <div class="search">
      <i class="iconfont iconsousuo"></i>
      <input
        class="uni-input"
        confirm-type="search"
        placeholder-style="color:#999999;font-size:24rpx;padding-left:0rpx;box-sizing:border-box;"
        placeholder="请输入关键词"
        cursor="20rpx"
      />
    </div>
    <div class="top">
        <view class="listcontainer">
          <view class="top">
            <view class="topitem" @click="all(1)" :class="{color:num === 1}">
              <span class="title">全部展品</span>
              <i class="iconfont" v-if="!one">&#xe612;</i>
              <i class="iconfont before" v-else>&#xe649;</i>
            </view>
            <view class="topitem" @click="centertype(2)" :class="{color:num === 2}">
              <span class="title">产品类型</span>
              <i class="iconfont" v-if="!two">&#xe612;</i>
              <i class="iconfont before" v-else>&#xe649;</i>
            </view>
            <view class="topitem" @click="state(3)" :class="{color:num === 3}">
              <span class="title">更多选项</span>
              <i class="iconfont" v-if="!three">&#xe612;</i>
              <i class="iconfont before" v-else>&#xe649;</i>
            </view>
          </view>
          <!-- 下拉项 -->
          <!-- 全部展商下拉 -->
          <view class="exhibitsList" :class="{active:one}">
            <view class="listitem" v-for="(item,index) in exhibits" :key="index">
              {{item}}
            </view>
          </view>
          <!-- 类型下拉 -->
          <view class="exhibitsList" :class="{active:two}">
            <view class="listitem" v-for="item in type" :key="item.id">
              {{item.text}}
            </view>
          </view>
          <!-- 更多选项 -->
          <view class="exhibitsList" :class="{active:three}">
            <view class="moreItem" >
              <view class="itemText" v-for="item in more" :key="item.id">{{item.text}}</view>
              <view class="slider" style="margin:50rpx 0;width:500rpx;">
                <RangeSlider
                  :width="slideWidth"
                  :height="slideHeight"
                  :blockSize="slideBlockSize"
                  :min="slideMin"
                  :max="slideMax"
                  :values="rangeValues"
                  :step="step"
                  :liveMode="isLiveMode"
                  @rangechange="onRangeChange3"
                >
				        </RangeSlider>
                <view slot="minBlock" class="range-slider-block" style="font-size:24rpx;float:left;">{{rangeValues[0]}}</view>
                <!-- 左边滑块的内容 -->
                <view slot="maxBlock" class="range-slider-block" style="font-size:24rpx;float:right;">{{rangeValues[1]}}</view>
                <!-- 右边滑块的内容 -->
              </view>
            </view>
          </view>
        </view>
    </div>
    <div class="itemBox">
        <div class="box" v-for="(item,index) in itemList" :key="index">
          <div class="left">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="middle">
            <div class="title">
              <span>{{item.title}}</span>
              <span class="type">{{item.type}}</span>
            </div>
            <div class="text">{{item.text}}</div>
            <div class="watch">
              <i class="iconfont">&#xe64e;</i>
              <span>{{item.watch}}</span>
            </div>
          </div>
          <div class="right">
            <div class="follow">关注</div>
          </div>
        </div>
    </div>
    <!-- 遮罩 -->
		<view class="mask" v-if="isMask">
		</view>
		<!-- 头部遮罩 -->
		<view class="topmask" v-if="isMask">

		</view>
  </view>
</template>
<script>
import RangeSlider from '../../components/range-slider.vue';
export default {
  name: "",
  components: {
    RangeSlider

  },
  data() {
    return {
      // rangeValues: [2, 5], //当前区间值
			// slideWidth: 350, //宽度
			// slideHeight: 80,  //高度
			// slideBlockSize: 56, //圆形按钮大小
			// slideMin: 0,  //slider最小值
			// slideMax: 12,  //slider最大值
        rangeValues: [1354, 4500],
        slideWidth: 500,
        slideHeight: 30,
        slideBlockSize: 30,
        slideMin: 1354,
        slideMax: 4500,
        isLiveMode: true,
        step: 1,
        //
        timeMinValue: 0,
        timeMaxValue: 10,
        one: true,
				two: true,
				three: true,
				num: 0,
				exhibits: ['车床', '铣床', '镗床', '磨床', '齿轮加工机床',
					'钻削和攻丝机床', '组合机床及部件', '加工中心及并联机床',
					'其它机床', '成形机床', '特种加工机床', '数控系统、数显装置',
					'锯床、插床、拉床和', '制造单元/系', '机床零部件及配套件',
					'数控系统、数显装置', '磨料磨具、超硬材料', '刀具、共夹具及相关',
					'设计、制造、管理及服务', '软件及工程设计', '木工机械', '信息、咨询服务'
				], //全部展品数据
				type: [{
						id: 0,
						text: '全部'
					},
					{
						id: 1,
						text: '卧式车床'
					},
					{
						id: 2,
						text: '立式车床'
					},
					{
						id: 3,
						text: '多轴车床'
					},
					{
						id: 4,
						text: '多刀车床'
					},
					{
						id: 5,
						text: '超精车床'
					},
					{
						id: 6,
						text: '专用车床'
					},
					{
						id: 7,
						text: '车削中心'
					},
					{
						id: 8,
						text: '车/铣复合机床'
					},
					{
						id: 9,
						text: '其它'
					},
				],
				more: [
          {text:'刀架上最大回转直径'},{text:'床身上转直径'},{text:'两顶尖最大距离'},{text:"工件最大重量"}],
      itemList:[
        {
          imgUrl:"http://124.70.27.33/xcx/img-three.png",
          title:"云南机床 CY-K360N",
          type:"3D",
          text:"精雕机（CNC engraving and milling machine）它是数控机床的一种。金属激光精雕机可对金属...",
          watch:"3535"
        },
        {
          imgUrl:"http://124.70.27.33/xcx/img-three.png",
          title:"皖南机床 VMC850L",
          type:"3D",
          text:"精雕机（CNC engraving and milling machine）它是数控机床的一种。金属激光精雕机可对金属金属激光精雕机可对金属金属激光精雕机可对金属",
          watch:"3535"
        },
        {
          imgUrl:"http://124.70.27.33/xcx/img-three.png",
          title:"云南机床 CY-K360N",
          type:"3D",
          text:"精雕机（CNC engraving and milling machine）它是数控机床的一种。金属激光精雕机可对金属...",
          watch:"3535"
        },
        {
          imgUrl:"http://124.70.27.33/xcx/img-three.png",
          title:"皖南机床 VMC850L",
          type:"3D",
          text:"精雕机（CNC engraving and milling machine）它是数控机床的一种。金属激光精雕机可对金属金属激光精雕机可对金属金属激光精雕机可对金属",
          watch:"3535"
        },
        {
          imgUrl:"http://124.70.27.33/xcx/img-three.png",
          title:"皖南机床 VMC850L",
          type:"3D",
          text:"精雕机（CNC engraving and milling machine）它是数控机床的一种。金属激光精雕机可对金属金属激光精雕机可对金属金属激光精雕机可对金属",
          watch:"3535"
        },
        {
          imgUrl:"http://124.70.27.33/xcx/img-three.png",
          title:"皖南机床 VMC850L",
          type:"3D",
          text:"精雕机（CNC engraving and milling machine）它是数控机床的一种。金属激光精雕机可对金属金属激光精雕机可对金属金属激光精雕机可对金属",
          watch:"3535"
        },
      ]
    };
  },
  created() {},
  methods: {
    onRangeChange3: function(e) {
      this.rangeValues = [e.minValue, e.maxValue];
      // console.log(this.rangeValues[0]);
      // console.log(this.rangeValues[1]);
		},
    all(num) {
				this.one = !this.one
				this.two = true;
				this.three = true;
				if (this.one === false) {
					this.num = num
				} else {
					this.num = 0
				}
			},
			centertype(num) {
				this.one = true;
				this.two = !this.two;
				this.three = true;
				if (this.two === false) {
					this.num = num
				} else {
					this.num = 0
				}
			},
			state(num) {
				this.one = true;
				this.two = true;
				this.three = !this.three;
				if (this.three === false) {
					this.num = num
				} else {
					this.num = 0
				}
			},
			letter(num) {
				this.one = true;
				this.two = true;
				this.three = true;
				this.num = num;
			},
			PV(num) {
				this.one = true;
				this.two = true;
				this.three = true;
				this.num = num;
			}
  },
  computed: {
		isMask() {
			return this.one === false || this.two === false || this.three === false
		}
	},
};
</script>
<style lang='less' scoped>
.exhibits{
  width: 750rpx;
  padding:0 30rpx ;
  box-sizing: border-box;
  position: relative;
  .search{
    position: relative;
    z-index: 999;
    width:690rpx;
    margin: 15rpx auto;
    margin-bottom: 30rpx;
    display: flex;
    background:rgba(241,241,241,1) !important;
      border-radius:30rpx;
    i{
      font-size: 30rpx;
      line-height:60rpx;
      margin: 0 15rpx;
      color: #999999;
    }
    input{
      width:670rpx;
      height:60rpx;
      // background:rgba(241,241,241,1);
      // border-radius:30rpx;
      // padding-left: 40rpx;
      font-size: 30rpx;
      box-sizing: border-box; 
    }
     
  }
  .top{
    
    .listcontainer {
			width: 690rpx;
			// margin:0 30rpx;
			margin-top: 30rpx;

			.top {
				position: absolute;
				left: 11rpx;
				z-index: 5;
				display: flex;
				justify-content: space-between;
				height: 40rpx;
				background: #FFFFFF;
				/* 	background: #DD524D; */
				margin-bottom: 20rpx;
				position: relative;

				.topitem {
					display: flex;
					align-items: center;
					height: 100%;
					justify-content: space-between;
					.title,.iconfont,i{
						font-size: 28rpx;
						line-height: 30rpx;
						align-items: center;
          }
          .before{
            // margin-top: -5rpx;
            // align-items: center;
          }
					&.color {
						color: #F47C00;
					}

					span {
						margin-right: 5rpx;
					}

					i {
						margin-top: 20rpx;
					}
				}
			}


			.exhibitsList {
				position: absolute;
				left: 0rpx;
				top: 150rpx;
				width: 750rpx;
				margin-bottom: 33rpx;
				/* height: 100%; */
				background: #FFFFFF;
				overflow: hidden;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				z-index: 5;
        .moreItem{
          // background-color: pink;
          padding: 0 70rpx;
          box-sizing: border-box;
          // background-color: #C9C9C9;
          .itemText{
            display: inline-block;
            padding: 0 25rpx;
            font-size: 28rpx;
            color: #333333;
            line-height: 45rpx;
            border-radius:23px;
            margin-top: 43rpx;
          }
          .maxBlock{

          }
          .itemText:nth-child(2n){
            margin-left: 50rpx;
          }
        }
				&.active {
					display: none;
				}

				.listitem {
					height: 45rpx;
					background: rgba(235, 235, 235, 1);
					border-radius: 23rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 45rpx;
					text-align: center;
					margin-top: 32rpx;
					padding: 0rpx 20rpx 0 20rpx;
				}
			}

		}
  }
  .itemBox{
    .box{
      // width: 100%;
      display: flex;
      border-bottom: 1px solid rgba(238,238,238,1);
      padding: 30rpx 0;
      .left{
        width:120rpx;
        height:120rpx;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .middle{
        width: 460rpx;
        margin-left: 18rpx;
        .title{
          font-size: 28rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow:ellipsis;
          color: #333333;
          .type{
            font-size: 18rpx;
            color: #999999;
            display: inline-block;
            padding: 0 20rpx;
            margin-left: 25rpx;
            border:1px solid rgba(204,204,204,1);
            border-radius:13px;
          }
        }
        .text{
          line-height: 24rpx;
          margin-top: 16rpx;
          font-size: 22rpx;
          color: #666666;
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow:ellipsis;
          overflow:hidden;
          text-overflow:ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-box-pack: center;
          -webkit-box-align: center;
          -webkit-line-clamp:2;
          overflow: hidden;
        }
        .watch{
          display: flex;
          font-size: 18rpx;
          color: #999999;
          margin-top: 12rpx;
          i{
            margin-right: 15rpx;
            font-size: 24rpx;
          }
        }
      }
      .right{
        .follow{
          float: right;
          right: 0;
          margin-top: 45rpx;
          display: inline-block;
          // width:85rpx;
          height:40rpx;
          background:rgba(244,124,0,1);
          border-radius:20rpx;
          font-size: 24rpx;
          color: #fff;
          padding: 0 20rpx;
          line-height: 40rpx;
          text-align: center;
        }
      }
    }
  }
  .mask {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, .3);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
  .topmask {
  	position: absolute;
  	left: 0;
  	top: 0;
  	width: 750rpx;
  	height: 300rpx;
  	background: #FFFFFF;
  	z-index: 4;
  }
}

</style>